<template>
  <div class="inspection-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>来料检验</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleCreate"
              >新建检验单</el-button
            >
            <el-button type="success" @click="handleTemplate"
              >检验模板</el-button
            >
          </div>
        </div>
      </template>

      <el-form :inline="true" :model="queryForm" class="search-form">
        <el-form-item label="检验单号">
          <el-input
            v-model="queryForm.inspectionNo"
            placeholder="请输入检验单号"
          />
        </el-form-item>
        <el-form-item label="供应商">
          <el-select
            v-model="queryForm.supplier"
            placeholder="请选择供应商"
            clearable
            filterable
            remote
            :remote-method="handleSupplierSearch"
          >
            <el-option
              v-for="item in supplierOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input
            v-model="queryForm.materialCode"
            placeholder="请输入物料编码"
          />
        </el-form-item>
        <el-form-item label="检验日期">
          <el-date-picker
            v-model="queryForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="检验状态">
          <el-select
            v-model="queryForm.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="待检验" value="pending" />
            <el-option label="检验中" value="processing" />
            <el-option label="合格" value="qualified" />
            <el-option label="不合格" value="unqualified" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <el-form label-position="left" inline class="inspection-detail">
              <el-descriptions :column="3" border>
                <el-descriptions-item label="收货单号">
                  {{ props.row.receiptNo }}
                </el-descriptions-item>
                <el-descriptions-item label="检验标准">
                  {{ props.row.standard }}
                </el-descriptions-item>
                <el-descriptions-item label="检验人">
                  {{ props.row.inspector }}
                </el-descriptions-item>
              </el-descriptions>

              <el-table :data="props.row.items" border class="mt-20">
                <el-table-column prop="itemName" label="检验项目" />
                <el-table-column prop="standard" label="检验标准" />
                <el-table-column prop="result" label="检验结果" />
                <el-table-column prop="isQualified" label="是否合格">
                  <template #default="scope">
                    <el-tag
                      :type="scope.row.isQualified ? 'success' : 'danger'"
                    >
                      {{ scope.row.isQualified ? "合格" : "不合格" }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="inspectionNo" label="检验单号" width="160" />
        <el-table-column prop="materialCode" label="物料编码" width="120" />
        <el-table-column prop="materialName" label="物料名称" min-width="120" />
        <el-table-column prop="supplier" label="供应商" width="180" />
        <el-table-column prop="batchNo" label="批次号" width="120" />
        <el-table-column prop="sampleQuantity" label="抽样数" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleInspect(scope.row)"
              v-if="scope.row.status === 'pending'"
            >
              检验
            </el-button>
            <el-button link type="primary" @click="handleDetail(scope.row)">
              详情
            </el-button>
            <el-button
              link
              type="primary"
              @click="handlePrint(scope.row)"
              v-if="
                scope.row.status === 'qualified' ||
                scope.row.status === 'unqualified'
              "
            >
              打印
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新建/编辑检验单弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'create' ? '新建检验单' : '编辑检验单'"
      width="60%"
    >
      <el-form
        ref="inspectionFormRef"
        :model="inspectionForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="收货单号" prop="receiptNo">
          <el-select
            v-model="inspectionForm.receiptNo"
            placeholder="请选择收货单"
            filterable
            remote
            :remote-method="handleReceiptSearch"
            @change="handleReceiptChange"
          >
            <el-option
              v-for="item in receiptOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检验模板" prop="templateId">
          <el-select
            v-model="inspectionForm.templateId"
            placeholder="请选择检验模板"
            @change="handleTemplateChange"
          >
            <el-option
              v-for="item in templateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="抽样数量" prop="sampleQuantity">
          <el-input-number
            v-model="inspectionForm.sampleQuantity"
            :min="1"
            :max="inspectionForm.totalQuantity"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="inspectionForm.remark"
            type="textarea"
            rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 检验操作弹窗 -->
    <el-dialog v-model="inspectDialogVisible" title="检验记录" width="80%">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="检验单号">
          {{ currentInspection.inspectionNo }}
        </el-descriptions-item>
        <el-descriptions-item label="物料编码">
          {{ currentInspection.materialCode }}
        </el-descriptions-item>
        <el-descriptions-item label="物料名称">
          {{ currentInspection.materialName }}
        </el-descriptions-item>
      </el-descriptions>

      <el-table :data="inspectionItems" border class="mt-20">
        <el-table-column prop="itemName" label="检验项目" width="150" />
        <el-table-column prop="standard" label="检验标准" width="200" />
        <el-table-column prop="method" label="检验方法" width="150" />
        <el-table-column label="检验结果">
          <template #default="scope">
            <el-input v-model="scope.row.result" placeholder="请输入检验结果" />
          </template>
        </el-table-column>
        <el-table-column label="是否合格" width="100">
          <template #default="scope">
            <el-switch
              v-model="scope.row.isQualified"
              active-text="合格"
              inactive-text="不合格"
            />
          </template>
        </el-table-column>
        <el-table-column label="备注" width="200">
          <template #default="scope">
            <el-input v-model="scope.row.remark" placeholder="请输入备注" />
          </template>
        </el-table-column>
      </el-table>

      <div class="mt-20">
        <el-form :model="inspectForm" label-width="100px">
          <el-form-item label="检验结论">
            <el-radio-group v-model="inspectForm.conclusion">
              <el-radio label="qualified">合格</el-radio>
              <el-radio label="unqualified">不合格</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="处理意见">
            <el-input
              v-model="inspectForm.suggestion"
              type="textarea"
              rows="3"
              placeholder="请输入处理意见"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="inspectDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleInspectSubmit"
            >提交</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

// 供应商选项
const supplierOptions = [
  { value: "SUP001", label: "江苏科技有限公司" },
  { value: "SUP002", label: "上海精密制造厂" },
  { value: "SUP003", label: "深圳电子科技有限公司" },
  { value: "SUP004", label: "东莞五金制品厂" },
  { value: "SUP005", label: "无锡机械配件有限公司" },
];

// 查询表单
const queryForm = reactive({
  inspectionNo: "",
  supplier: "",
  materialCode: "",
  dateRange: [],
  status: "",
});

// 表格数据
const tableData = ref([
  {
    inspectionNo: "IQC202403150001",
    materialCode: "MC100234",
    materialName: "精密轴承",
    supplier: "江苏科技有限公司",
    batchNo: "BT20240315",
    receiptNo: "RN20240315001",
    totalQuantity: 500,
    sampleQuantity: 10,
    status: "pending",
    inspector: "张工",
    inspectionTime: "2024-03-15 09:30:00",
    standard: "标准QB3321",
    items: [
      {
        itemName: "外观",
        standard: "无划痕、无锈蚀",
        result: "合格",
        isQualified: true,
        remark: "表面完好",
      },
      {
        itemName: "尺寸",
        standard: "50±0.02mm",
        result: "49.99mm",
        isQualified: true,
        remark: "在允许范围内",
      },
      {
        itemName: "硬度",
        standard: "HRC58-62",
        result: "HRC60",
        isQualified: true,
        remark: "符合要求",
      },
    ],
    remark: "常规检验",
  },
  {
    inspectionNo: "IQC202403150002",
    materialCode: "MC100456",
    materialName: "电子元件",
    supplier: "深圳电子科技有限公司",
    batchNo: "BT20240315",
    receiptNo: "RN20240315002",
    totalQuantity: 1000,
    sampleQuantity: 20,
    status: "qualified",
    inspector: "李工",
    inspectionTime: "2024-03-15 10:15:00",
    standard: "标准QB3322",
    items: [
      {
        itemName: "外观",
        standard: "完整无损",
        result: "合格",
        isQualified: true,
        remark: "外观良好",
      },
      {
        itemName: "电阻值",
        standard: "100Ω±5%",
        result: "102Ω",
        isQualified: true,
        remark: "在允许范围内",
      },
    ],
    remark: "重点检验批次",
  },
  {
    inspectionNo: "IQC202403150003",
    materialCode: "MC100789",
    materialName: "金属外壳",
    supplier: "东莞五金制品厂",
    batchNo: "BT20240315",
    receiptNo: "RN20240315003",
    totalQuantity: 300,
    sampleQuantity: 8,
    status: "unqualified",
    inspector: "王工",
    inspectionTime: "2024-03-15 11:00:00",
    standard: "标准QB3323",
    items: [
      {
        itemName: "外观",
        standard: "无变形、无划痕",
        result: "有轻微变形",
        isQualified: false,
        remark: "需要返工",
      },
      {
        itemName: "涂层",
        standard: "均匀无脱落",
        result: "合格",
        isQualified: true,
        remark: "涂层完好",
      },
    ],
    remark: "发现不合格项，已通知供应商",
  },
]);

// 分页数据
const total = ref(3);
const currentPage = ref(1);
const pageSize = ref(10);

// 状态显示
const getStatusType = (status) => {
  const statusMap = {
    pending: "info",
    processing: "warning",
    qualified: "success",
    unqualified: "danger",
  };
  return statusMap[status];
};

const getStatusText = (status) => {
  const statusMap = {
    pending: "待检验",
    processing: "检验中",
    qualified: "合格",
    unqualified: "不合格",
  };
  return statusMap[status];
};

// 处理函数
const handleSearch = () => {
  ElMessage.success("查询成功");
};

const handleReset = () => {
  Object.keys(queryForm).forEach((key) => {
    queryForm[key] = "";
  });
  queryForm.dateRange = [];
};

const handleCreate = () => {
  ElMessage.success("新建检验单");
};

const handleTemplate = () => {
  ElMessage.success("打开检验模板");
};

const handleExport = () => {
  ElMessage.success("导出成功");
};

const handleInspect = (row) => {
  ElMessage.success(`开始检验：${row.inspectionNo}`);
};

const handleDetail = (row) => {
  ElMessage.success(`查看详情：${row.inspectionNo}`);
};

const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};
</script>

<style scoped>
.inspection-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.inspection-detail {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
